<template>
  <!-- 诊疗项目查询 -->
  <div id="app">
    <!-- 设置顶部导航栏 -->
    <mt-header title="诊 疗 项 目 查 询">
      <mt-button icon="back" slot="left" @click="goBack('search')"
        >返回</mt-button
      >
      <mt-button slot="right" @click="goHome">
        <img
          src="../../assets/images/home.png"
          height="20"
          width="20"
          slot="icon"
          style="margin-top: 5px"
        />
      </mt-button>
    </mt-header>

    <!-- 内容区域 -->
    <div class="content">
      <!-- 搜索 -->
      <div class="search">
        <van-search
          v-model="searchTxt"
          background="#81ecec"
          shape="round"
          show-action
          placeholder="搜索诊疗项目"
          @search="goSearch"
          @clear="onCancel"
          @cancel="onCancel"
        />
      </div>

      <!-- 列表区域 -->

      <van-swipe-cell v-for="(item, index) in dataList" :key="index">
        <van-cell :title="item.name" :value="'费用: ' + +item.price + '/次'" />
        <template #right>
          <van-button
            square
            type="danger"
            text="删除"
            @click="deleteTrea(item.id)"
          />
          <van-button
            square
            type="primary"
            text="修改"
            @click="modifyTrea(item.id)"
          />
        </template>
      </van-swipe-cell>

      <!-- AddBtn -->
      <van-button type="primary" block @click="addTreat"
        >添加诊疗项目</van-button
      >
    </div>
  </div>
</template>

<script>
export default {
  name: "Diagnostic",

  data() {
    return {
      searchTxt: "", //搜索的文本内容
      dataList: [],
    };
  },

  mounted() {},

  created() {
    this.getTreat();
  },

  methods: {
    goBack(index) {
      this.$router.push({
        path: "../index",
        query: { index },
      });
    },
    goHome() {
      this.$router.push({
        path: "../index",
      });
    },
    //搜索
    goSearch() {
      this.$http
        .get("treat-type", {
          params: {
            name: this.searchTxt,
          },
        })
        .then((res) => {
          this.dataList = res.data.data
          console.log(res);
        });
    },
    //取消搜索
    onCancel(){
      this.getTreat()
    },
    //调用数据接口
    getTreat() {
      this.$http.get("treat-type", {}).then((res) => {
        console.log(res);
        this.dataList = res.data.data;
      });
    },
    //删除项目
    deleteTrea(id) {
      this.$http
        .delete("treat-type", {
          params: {
            ids: id,
          },
        })
        .then((res) => {
          console.log(res);
        });
    },
    //修改项目
    modifyTrea(id) {
      this.$router.push({
        path: "./staffManage",
        query: {
          id,
        },
      });
    },
    //增加项目按钮
    addTreat() {
      this.$router.push({
        path: "./staffManage",
      });
    },
  },
};
</script>

<style lang="less" scoped>
#app {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #fff;
}
#app /deep/ .mint-header-title {
  overflow: initial;
}
.content {
  background-color: #fff;
  .search {
    /deep/ .mint-search {
      height: 100%;
    }
  }
  .listInner {
    padding: 10px 0 10px 15px;
    border-bottom: 1px solid #ddd;
    display: flex;
    align-items: center;
    .nameLeft {
      p {
        font-size: 14px;
        line-height: 18px;
        color: #778ca3;
      }
    }
    .priceRight {
      flex: 1;
      text-align: right;
      padding-right: 15px;
      color: #ff9f43;
      font-size: 15px;
      font-weight: 600;
    }
  }
}
</style>